<template>
	<view class="idle-details-page" v-if="selectOrder && selectOrder.orderId">
		<bar-title bgColor="bg-white"
			:isBack="true"
			:isSolid="false"
		>
			<block slot="content">
				<text v-if="refuse=='true'">拒绝退款</text>
				<text v-else>申请退款</text>
			</block>
		</bar-title>
		
	
		<!-- 商品 -->
		<view class="goods-section" v-if="selectOrder.productId">
			<!-- 二手剧本 -->
			<view class="scen-group">
				<view class="scen2  text-gray">
					<view class="scen-img">
						<image :src="selectOrder.productIcon" mode="aspectFill"></image>
					</view>
					<view class="scen-info">
						<view class="scen-info-title">
							<text class="title">{{selectOrder.scenName}}</text>
							<text  class='cu-tag bg-cyan round sm'>{{selectOrder.scenNum}}人本</text>
						</view>
						<view class="publisher">发行商:{{selectOrder.scriptPublisher}}</view>
						<view class="text-price">{{selectOrder.productDiscountPrice}}</view>
					</view>
					<view class="num"><text class="text-xs">x</text>1</view>
				</view>
			</view>
			
		</view>
		
		<view class="cu-list menu" v-if="refuse=='true'">
			<view class="cu-item arrow">
				<view class="content">
					<text class="text-black">货物状态</text>
					<text class="text-red">*</text>
				</view>
				<view class="action">
					<picker
						:value="goodsState" 
						:range="goodsStateList"
						:range-key="'name'"
						@change="bindPickerChange('goodsState', $event)"
					>
						<view class="text-gray" v-if="goodsState == -1">请选择</view>
						<view class="" v-else>
							{{goodsStateList[goodsState].name}}
						</view>
					</picker>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text class="text-black">拒绝退款原因</text>
					<text class="text-red">*</text>
				</view>
				<view class="action">
					<picker
						:value="returnReason" 
						:range="returnReasonList"
						:range-key="'refusedRefund'"
						@change="bindPickerChange('returnReason', $event)"
					>
					
						<view class="text-gray" v-if="returnReason == -1">请选择</view>
						<view class="" v-else>
							{{returnReasonList[returnReason].refusedRefund}}
						</view>
					</picker>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="text-black">应退款金额</text>
					<text class="text-red">*</text>
				</view>
				<view class="action">
					<text class="text-red text-price">{{selectOrder.productDiscountPrice}}</text>
				</view>
			</view>
			<view class="cu-item ">
				<view class="content">
					<text class="text-black text-bold">拒绝退款说明</text>
				</view>
				<view class="action">
					<text class="text-grey">{{refundRemark.length}}/200</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu" v-else>
			<view class="cu-item" >
				<view class="content ">
					<text class="text-black text-bold">申请退款</text>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text class="text-black">货物状态</text>
					<text class="text-red">*</text>
				</view>
				<view class="action">
					<picker
						:value="goodsState" 
						:range="goodsStateList"
						:range-key="'name'"
						@change="bindPickerChange('goodsState', $event)"
					>
						<view class="text-gray" v-if="goodsState == -1">请选择</view>
						<view class="" v-else>
							{{goodsStateList[goodsState].name}}
						</view>
					</picker>
				</view>
			</view>
			<view class="cu-item arrow">
				<view class="content">
					<text class="text-black">退款原因</text>
					<text class="text-red">*</text>
				</view>
				<view class="action">
					<picker
						:value="returnReason" 
						:range="returnReasonList"
						:range-key="'returnReason'"
						@change="bindPickerChange('returnReason', $event)"
					>
					
						<view class="text-gray" v-if="returnReason == -1">请选择</view>
						<view class="" v-else>
							{{returnReasonList[returnReason].returnReason}}
						</view>
					</picker>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="text-black">退款金额</text>
					<text class="text-red">*</text>
				</view>
				<view class="action">
					<text class="text-red text-price">{{selectOrder.productDiscountPrice}}</text>
				</view>
			</view>
			<view class="cu-item ">
				<view class="content">
					<text class="text-black text-bold">申请说明</text>
					<text class="text-red">*</text>
				</view>
				<view class="action">
					<text class="text-grey">{{refundRemark.length}}/200</text>
				</view>
			</view>
		</view>
		
		<view class="cu-form-group">
			<textarea maxlength="200" 
				name="refundRemark"
				@input="textareaAInput"
				placeholder="请您填写申请说明..."></textarea>
		</view>
		<view></view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" 
					v-for="(item,index) in imgList" 
					:key="index" 
					@tap="ViewImage" 
					:data-url="imgList[index]"
				>
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" 
						@tap.stop="DelImg" 
						:data-index="index"
					>
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" 
					@tap="imgclick" 
					v-if="imgList.length<9"
				>
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		
		
		<!-- 底部 -->
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white shadow foot" >
			<view class="cu-bar btn-group">
				<button class="cu-btn bg-cyan shadow-blur round lg"
					@click="onRefund"
				>提交</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex";
import { Leisurely } from '@/models/leisurely.js';
var cos = require('@/common/cos');
export default {
	data() {
		return {
			refundType: '1',
			refuse: '',
			imgList: [],
			goodsStateList: [{
				id: '1',
				name: '未收货',
			}, {
				id: '2',
				name: '已收货',
			}],
			returnReasonList: [],
			goodsState: -1,
			returnReason: -1,
			refundRemark: '',
		}
	},
	computed: {
		...mapState(['selectOrder']),
	},
	onLoad(option) {
		if (option && option.type) {
			this.refundType = option.type
			this.refuse = option.refuse
			if(option.refuse=='true') {
				this.$apis.returnNotReason({
					type: 'J'
				}).then(res => {
					this.returnReasonList = res
				})
			}else{
				this.$apis.returnReason({
					orderId: this.selectOrder.orderId
				}).then(res => {
					this.returnReasonList = res
				})
			}
			
		}
		
	},
	methods: {
		onRefund() {
			if(this.goodsState == -1) {
				this.$mTool.showModal({
					title: '提示',
					content: '请选择货物状态！',
					showCancel: false
				})
				return
			}
			if(this.returnReason == -1) {
				this.$mTool.showModal({
					title: '提示',
					content: '请选择退货原因！',
					showCancel: false
				})
				return
			}
			if(this.refundRemark == '') {
				this.$mTool.showModal({
					title: '提示',
					content: '请填写详细原因！',
					showCancel: false
				})
				return
			}
			
			let list = this.imgList.map(imgSrc => {
				return {
					productsurl: imgSrc
				}
			})
			if(this.refuse=='true') {
				Leisurely.submitRefused({
					orderId: this.selectOrder.orderId,
					refundType: this.refundType,
					refundRemark: this.refundRemark,
					productId: this.selectOrder.productId,
					goodsStatus: this.goodsStateList[this.goodsState].id,
					refusedRefundId: this.returnReasonList[this.returnReason].id,
					list
				}).then(res => {
					this.$mTool.showModal({
						title: '提示',
						content: '你已拒绝退款。',
						showCancel: false,
						success: res => {
							if (res.confirm) {
								this.$jumpPages('myidle', {cur: 2})
							}
						}
					})
					
				})
			}else{
				Leisurely.submitRefund({
					orderId: this.selectOrder.orderId,
					refundType: this.refundType,
					refundRemark: this.refundRemark,
					productId: this.selectOrder.productId,
					goodsStatus: this.goodsStateList[this.goodsState].id,
					returnReasonId: this.returnReasonList[this.returnReason].id,
					list
				}).then(res => {
					this.$mTool.showModal({
						title: '提示',
						content: '申请已经提交，等待卖家处理。',
						showCancel: false,
						success: res => {
							if (res.confirm) {
								this.$jumpPages('myidle', {cur: 2})
							}
						}
					})
					
				})
			}
			
			
		},
		bindPickerChange: function(name, e) {
			this[name] = e.target.value
		},
		textareaAInput(e) {
			this.refundRemark = e.detail.value
		},
		imgclick(key) {
			cos.postObject(url => {
				this.imgList.push(url)
			})
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '提示',
				content: '是否要删除当前已上传图片？',
				success: res => {
					if (res.confirm) {
						cos.deleteObject(this.imgList[index])
						this.imgList.splice(index, 1)
					}
				}
			})
		},
	},
	
}
</script>

<style lang="scss" scoped>
.goods-section {
	background: #F8FAFF;
	.scen-group{
		padding: 20rpx 30rpx;
	}
	.scen2{
		display: flex;
		position: relative;
		padding-bottom: 20rpx;
		
		.scen-img{
			width: 120rpx;
			height: 165rpx;
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			position: relative;
			background: #F5F5F5;
			border-radius: 10rpx;
			image{
				border-radius: 10rpx;
				width: 120rpx;
				height: 165rpx;
			}
		}
		.scen-info{
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 15px;
			font-size: 14px;
		}
		.scen-info-title{
			line-height: 20px;
			margin-bottom: 24rpx;
			.title{
				font-size: 36rpx;
				color: #000;
				font-weight: 700;
				margin-right: 27rpx;
			}
		}
		.publisher{
			margin-bottom: 30rpx;
			font-size: 24rpx;
		}
		.text-price{
			color: #E42C2C;
			font-size: 32rpx;
			font-weight: 700;
		}
	}
	
}
.refund-type{
	display: flex;
	height: 140rpx;
	align-items: center;
	.icon{
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}
	.title{
		color: #000000;
		font-size: 30rpx;
		margin-bottom: 15rpx;
		font-weight: 700;
	}
	.desc{
		color: #909090;
		font-size: 24rpx;
		
	}
}
</style>
